<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>React 项目 第六天 | Megasu的笔记</title>
    <meta name="generator" content="VuePress 1.5.4">
    <link rel="icon" href="/react_54/favicon.ico">
    <meta name="description" content="Megasu的笔记整理">
    <meta name="author" content="Megasu">
    <meta name="Keywords" content="学习网站,前端,分享">
    <link rel="preload" href="/react_54/assets/css/0.styles.bb734bc1.css" as="style"><link rel="preload" href="/react_54/assets/js/app.238b6045.js" as="script"><link rel="preload" href="/react_54/assets/js/2.aab467b1.js" as="script"><link rel="preload" href="/react_54/assets/js/12.4b436566.js" as="script"><link rel="prefetch" href="/react_54/assets/js/10.43c4975e.js"><link rel="prefetch" href="/react_54/assets/js/11.81b9dc32.js"><link rel="prefetch" href="/react_54/assets/js/13.d7cc0a07.js"><link rel="prefetch" href="/react_54/assets/js/14.d4865720.js"><link rel="prefetch" href="/react_54/assets/js/15.dd96af22.js"><link rel="prefetch" href="/react_54/assets/js/16.a5df321b.js"><link rel="prefetch" href="/react_54/assets/js/17.8fc24c74.js"><link rel="prefetch" href="/react_54/assets/js/18.eed208cb.js"><link rel="prefetch" href="/react_54/assets/js/19.b719f9e7.js"><link rel="prefetch" href="/react_54/assets/js/20.2674521c.js"><link rel="prefetch" href="/react_54/assets/js/21.4687691e.js"><link rel="prefetch" href="/react_54/assets/js/22.5e24fb2c.js"><link rel="prefetch" href="/react_54/assets/js/23.26e52045.js"><link rel="prefetch" href="/react_54/assets/js/24.741d4743.js"><link rel="prefetch" href="/react_54/assets/js/25.736f0762.js"><link rel="prefetch" href="/react_54/assets/js/3.ff3dc391.js"><link rel="prefetch" href="/react_54/assets/js/4.17db1609.js"><link rel="prefetch" href="/react_54/assets/js/5.6327af75.js"><link rel="prefetch" href="/react_54/assets/js/6.9d7574a9.js"><link rel="prefetch" href="/react_54/assets/js/7.1195917d.js"><link rel="prefetch" href="/react_54/assets/js/8.8de02009.js"><link rel="prefetch" href="/react_54/assets/js/9.7acde14f.js">
    <link rel="stylesheet" href="/react_54/assets/css/0.styles.bb734bc1.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/react_54/" class="home-link router-link-active"><!----> <span class="site-name">Megasu的笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!---->  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/react_54/react/base/01-DAY" class="sidebar-heading clickable"><span>React基础</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/react_54/react/base/01-DAY.html" class="sidebar-link">React介绍 了解</a></li><li><a href="/react_54/react/base/02-DAY.html" class="sidebar-link">事件</a></li><li><a href="/react_54/react/base/03-DAY.html" class="sidebar-link">组件传值</a></li><li><a href="/react_54/react/base/04-DAY.html" class="sidebar-link">局部样式</a></li><li><a href="/react_54/react/base/05-DAY.html" class="sidebar-link">Redux</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/react_54/react/project/00-DAY" class="sidebar-heading clickable open"><span>React项目</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/react_54/react/project/01-DAY.html" class="sidebar-link">React 项目 第一天</a></li><li><a href="/react_54/react/project/02-DAY.html" class="sidebar-link">React 项目 第二天</a></li><li><a href="/react_54/react/project/03-DAY.html" class="sidebar-link">React 项目 第三天</a></li><li><a href="/react_54/react/project/04-DAY.html" class="sidebar-link">React 项目 第四天 第五天</a></li><li><a href="/react_54/react/project/06-DAY.html" aria-current="page" class="active sidebar-link">React 项目 第六天</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/react_54/react/project/06-DAY.html#react-项目-第六天" class="sidebar-link">React 项目 第六天</a></li><li class="sidebar-sub-header"><a href="/react_54/react/project/06-DAY.html#效果" class="sidebar-link">效果</a></li><li class="sidebar-sub-header"><a href="/react_54/react/project/06-DAY.html#业务逻辑" class="sidebar-link">业务逻辑</a></li><li class="sidebar-sub-header"><a href="/react_54/react/project/06-DAY.html#接口" class="sidebar-link">接口</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/react_54/mianshi/baodian01" class="sidebar-heading clickable"><span>面试宝典</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/react_54/mianshi/baodian01.html" class="sidebar-link">工作宝典</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="react-项目-第六天"><a href="#react-项目-第六天" class="header-anchor">#</a> React 项目 第六天</h2> <h2 id="效果"><a href="#效果" class="header-anchor">#</a> 效果</h2> <p><img src="/react_54/assets/img/image-20200301190010083.62ce20d7.png" alt="image-20200301190010083"></p> <h2 id="业务逻辑"><a href="#业务逻辑" class="header-anchor">#</a> 业务逻辑</h2> <ol><li>使用 <code>navbar</code>组件结合 之前封装的 <code>城市输入框</code>组件实现顶部功能</li> <li>发送请求获取 <code>筛选条件</code> 数据</li> <li>分析 <code>筛选数据</code> 和 页面组件的关系 ！ <strong>重要哦</strong></li> <li>使用 <code>ant-design-mobile</code> 的 <a href="https://mobile.ant.design/components/picker-view-cn/" target="_blank" rel="noopener noreferrer">picker-view<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 组件 结合 <code>筛选条件</code>数据实现 条件筛选功能</li> <li>根据筛选条件 发送请求 获取对应的房源列表数据</li> <li>结合 <code>react-virtualized</code> 组件实现数据显示和分页加载功能</li></ol> <h2 id="接口"><a href="#接口" class="header-anchor">#</a> 接口</h2> <ol><li><p>获取当前城市下的房源筛选数据（如北京）</p> <div class="language-js extra-class"><pre class="language-js"><code>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">157.122</span><span class="token number">.54</span><span class="token number">.189</span><span class="token operator">:</span><span class="token number">9060</span><span class="token operator">/</span>houses<span class="token operator">/</span>condition<span class="token operator">?</span>id<span class="token operator">=</span><span class="token constant">AREA</span><span class="token operator">%</span><span class="token number">7</span>C88cff55c<span class="token operator">-</span>aaa4<span class="token operator">-</span>e2e0
</code></pre></div></li> <li><p>根据条件获取房源数据</p> <div class="language-js extra-class"><pre class="language-js"><code>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">157.122</span><span class="token number">.54</span><span class="token number">.189</span><span class="token operator">:</span><span class="token number">9060</span><span class="token operator">/</span>houses<span class="token operator">?</span>cityId<span class="token operator">=</span><span class="token constant">AREA</span><span class="token operator">%</span><span class="token number">7</span>C88cff55c<span class="token operator">-</span>aaa4<span class="token operator">-</span>e2e0<span class="token operator">&amp;</span>area<span class="token operator">=</span><span class="token constant">AREA</span><span class="token operator">%</span><span class="token number">7</span>C88cff55c<span class="token operator">-</span>aaa4<span class="token operator">-</span>e2e0<span class="token operator">&amp;</span>rentType<span class="token operator">=</span><span class="token boolean">true</span><span class="token operator">&amp;</span>price<span class="token operator">=</span><span class="token keyword">null</span><span class="token operator">&amp;</span>more<span class="token operator">=</span><span class="token constant">CHAR</span><span class="token operator">%</span><span class="token number">7</span>C76eb0532<span class="token operator">-</span><span class="token number">8099</span><span class="token operator">-</span>d1f4<span class="token operator">%</span><span class="token number">2</span>CFLOOR<span class="token operator">%</span><span class="token number">7</span>C1<span class="token operator">%</span><span class="token number">2</span>CAREA<span class="token operator">%</span><span class="token number">7</span>C88cff55c<span class="token operator">-</span>aaa4<span class="token operator">-</span>e2e0<span class="token operator">%</span><span class="token number">2</span>CORIEN<span class="token operator">%</span><span class="token number">7</span>C61e99445<span class="token operator">-</span>e95e<span class="token operator">-</span><span class="token number">7</span>f37<span class="token operator">%</span><span class="token number">2</span>Ctrue<span class="token operator">&amp;</span>roomType<span class="token operator">=</span><span class="token constant">ROOM</span><span class="token operator">%</span><span class="token number">7</span>Cd1a00384<span class="token operator">-</span><span class="token number">5801</span><span class="token operator">-</span>d5cd<span class="token operator">&amp;</span>oriented<span class="token operator">=</span><span class="token constant">ORIEN</span><span class="token operator">%</span><span class="token number">7</span>C61e99445<span class="token operator">-</span>e95e<span class="token operator">-</span><span class="token number">7</span>f37<span class="token operator">&amp;</span>characteristic<span class="token operator">=</span><span class="token constant">CHAR</span><span class="token operator">%</span><span class="token number">7</span>C76eb0532<span class="token operator">-</span><span class="token number">8099</span><span class="token operator">-</span>d1f4<span class="token operator">&amp;</span>floor<span class="token operator">=</span><span class="token constant">FLOOR</span><span class="token operator">%</span><span class="token number">7</span>C1<span class="token operator">&amp;</span>start<span class="token operator">=</span><span class="token number">1</span><span class="token operator">&amp;</span>end<span class="token operator">=</span><span class="token number">20</span>
</code></pre></div></li></ol></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/react_54/react/project/04-DAY.html" class="prev">
        React 项目 第四天 第五天
      </a></span> <span class="next"><a href="/react_54/mianshi/baodian01.html">
        工作宝典
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/react_54/assets/js/app.238b6045.js" defer></script><script src="/react_54/assets/js/2.aab467b1.js" defer></script><script src="/react_54/assets/js/12.4b436566.js" defer></script>
  </body>
</html>
